<template>
  <div>
    <div class="container">
      <div class="c_banner">
        <div class="c_banner_text">
          <div class="c_banner_f1">{{ $t("ePro线上自助寄修中心") }}</div>
          <div class="c_banner_f2">{{ $t("在线报修 方便快捷") }}</div>
        </div>
        <img class="c_banner_img" src="~/assets/images/c_banner8.png" alt="" />
      </div>
      <div class="c_content">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">{{
            $t("首页")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'serviceSupport' }">{{
            $t("服务支持")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t("寄修服务") }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-if="active == 0">
          <div class="c_title">{{ $t("在线报修流程") }}</div>
          <el-steps align-center>
            <el-step :title="$t('提交申请')">
              <img
                slot="icon"
                class="c_step_img"
                src="~/assets/images/c_tijiao.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('售后专员1对1跟进')">
              <img
                slot="icon"
                class="c_step_img"
                src="~/assets/images/c_zhuanyuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('维修处理')">
              <img
                slot="icon"
                class="c_step_img"
                src="~/assets/images/c_weixiu1.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('处理完成')">
              <img
                slot="icon"
                class="c_step_img"
                src="~/assets/images/c_wancheng.png"
                alt=""
              />
            </el-step>
          </el-steps>
          <div class="c_button_view">
            <el-button class="c_button" @click="next">{{
              $t("下一步1")
            }}</el-button>
          </div>
        </div>
        <div v-else>
          <div class="c_title">{{ $t("提交寄修信息") }}</div>
          <el-steps :active="active" align-center>
            <el-step :title="$t('选择寄修设备')">
              <img
                slot="icon"
                v-if="active >= 1"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('填写故障信息')">
              <img
                slot="icon"
                v-if="active >= 2"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('填写物流信息')">
              <img
                slot="icon"
                v-if="active >= 3"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('处理完成')">
              <img
                slot="icon"
                v-if="active >= 4"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
          </el-steps>
        </div>
        <selectEquipment v-if="active == 1" @next="next"></selectEquipment>
        <faultInformation v-if="active == 2" @next="next"></faultInformation>
        <logisticsInformation
          v-if="active == 3"
          @next="next"
        ></logisticsInformation>
      </div>
    </div>

    <div class="container_mobile">
      <div class="c_banner">
        <div class="c_banner_text">
          <div class="c_banner_f1">{{ $t("ePro线上自助寄修中心") }}</div>
          <div class="c_banner_f2">{{ $t("在线报修 方便快捷") }}</div>
        </div>
        <img class="c_banner_img" src="~/assets/images/c_banner8.png" alt="" />
      </div>
      <div class="c_content">
        <div v-if="active == 0">
          <div class="c_title">{{ $t("在线报修流程") }}</div>
          <div class="newcards">
            <div class="newcard">
              <img
                slot="icon"
                class="c_step_img1"
                src="~/assets/images/c_tijiao.png"
                alt=""
              />
              <span class="newf1">{{ $t("提交申请") }}</span>
            </div>
            <img
              style="width: 9px; height: 14px; margin-top: 10px"
              slot="icon"
              class="c_step_img"
              src="~/assets/images/jiantou.png"
              alt=""
            />
            <div class="newcard">
              <img
                slot="icon"
                class="c_step_img1"
                src="~/assets/images/c_zhuanyuan.png"
                alt=""
              />
              <span class="newf1">{{ $t("售后专员1对1跟进") }}</span>
            </div>
            <img
              style="width: 9px; height: 14px; margin-top: 10px"
              slot="icon"
              class="c_step_img"
              src="~/assets/images/jiantou.png"
              alt=""
            />
            <div class="newcard">
              <img
                slot="icon"
                class="c_step_img1"
                src="~/assets/images/c_weixiu1.png"
                alt=""
              />
              <span class="newf1">{{ $t("维修处理") }}</span>
            </div>
            <img
              style="width: 9px; height: 14px; margin-top: 10px"
              slot="icon"
              class="c_step_img"
              src="~/assets/images/jiantou.png"
              alt=""
            />
            <div class="newcard">
              <img
                slot="icon"
                class="c_step_img1"
                src="~/assets/images/c_wancheng.png"
                alt=""
              />
              <span class="newf1">{{ $t("处理完成") }}</span>
            </div>
          </div>
          <div class="c_button_view">
            <el-button class="c_button" @click="next">{{
              active == 0 ? $t("寄修申请") : $t("下一步1")
            }}</el-button>
          </div>
        </div>
        <div v-else>
          <div class="c_title">{{ $t("提交寄修信息") }}</div>
          <el-steps :active="active" align-center>
            <el-step :title="$t('选择寄修设备')">
              <img
                slot="icon"
                v-if="active >= 1"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('填写故障信息')">
              <img
                slot="icon"
                v-if="active >= 2"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('填写物流信息')">
              <img
                slot="icon"
                v-if="active >= 3"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
            <el-step :title="$t('处理完成')">
              <img
                slot="icon"
                v-if="active >= 4"
                class="c_step_img"
                src="~/assets/images/c_yuan.png"
                alt=""
              />
            </el-step>
          </el-steps>
        </div>
        <selectEquipment v-if="active == 1" @next="next"></selectEquipment>
        <faultInformation v-if="active == 2" @next="next"></faultInformation>
        <logisticsInformation
          v-if="active == 3"
          @next="next"
        ></logisticsInformation>
      </div>
      <div style="height: 200rem"></div>
    </div>
  </div>
</template>

<script>
import selectEquipment from "../../components/selectEquipment.vue";
import faultInformation from "../../components/faultInformation.vue";
import logisticsInformation from "../../components/logisticsInformation.vue";
export default {
  components: {
    selectEquipment,
    faultInformation,
    logisticsInformation,
  },
  data() {
    return {
      active: 0,
      fromData: {},
    };
  },
  methods: {
    next(data) {
      // console.log(data, this.active, "000000000", this.fromData);
      if (this.active != 0) {
        Object.assign(this.fromData, data);
      }
      if (this.active == 3) {
        this.postRepairData();
      }
      if (this.active++ > 3) {
        this.active = 0;
      }
    },
    async postRepairData() {
      const res = await this.$indexApi.postRepairData(this.fromData);
      // console.log(res);
      if (res.code == 1) {
        this.$message({
          message: "恭喜你，提交并保存成功！",
          type: "success",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container {
    display: block;
  }

  .container_mobile {
    display: none;
  }

  .c_banner {
    width: 100%;
    height: 620rem;
    position: relative;

    .c_banner_text {
      position: absolute;
      top: 0;
      left: 360rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .c_banner_f1 {
        font-size: 60rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-bottom: 30rem;
      }

      .c_banner_f2 {
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
      }
    }

    .c_banner_img {
      width: 100%;
      height: 100%;
    }
  }

  .c_content {
    padding: 40rem 100rem;

    .c_title {
      margin: 40rem 0 130rem 0;
      font-size: 54rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      text-align: center;
    }

    .c_step_img {
      width: 110rem;
      height: 110rem;
      transition: 0.3s;
      &:hover{
        transform: scale(1.2);
      }
    }

    .c_button_view {
      display: flex;
      justify-content: center;
      margin: 200rem 0;

      .c_button {
        width: 600rem;
        height: 100rem;
        background: #333333;
        border-radius: 20rem;
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}

@media (max-width: 900px) {
  .container {
    display: none;
  }

  .container_mobile {
    display: block;
    background: #f7f7f7;
  }

  .c_banner {
    width: 100%;
    height: 240px;
    position: relative;

    .c_banner_text {
      position: absolute;
      top: 0;
      left: 27px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .c_banner_f1 {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
      }

      .c_banner_f2 {
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
      }
    }

    .c_banner_img {
      width: 100%;
      height: 100%;
    }
  }

  .c_content {
    .c_title {
      margin: 24px 0 37px 0;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      text-align: center;
    }

    .newcards {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .newcard {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        background: #fff;
        border-radius: 7px;
        height: 133px;
        width: 70%;
        .c_step_img1 {
          width: 40px;
          height: 40px;
        }
        .newf1 {
          font-size: 13px;
          color: #333;
          margin-top: 15px;
        }
      }
    }

    .c_step_img {
      width: 40px;
      height: 40px;
    }

    .c_button_view {
      display: flex;
      justify-content: center;
      margin: 20px 0;

      .c_button {
        width: 300px;
        height: 44px;
        background: #333333;
        border-radius: 7px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #fefefe;
      }
    }
  }
}
</style>



<style>
@media (min-width: 900px) {
  .el-step.is-center .el-step__line {
    left: 75%;
    right: -75%;
  }

  .el-step.is-horizontal .el-step__line {
    height: 0;
    top: 40rem;
    width: 50%;
    border: 1px dashed #e6e6e6;
  }

  .el-step__line-inner {
    border-style: dashed;
  }

  .el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: transparent;
  }

  .el-step__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80rem;
    height: 80rem;
    font-size: 36rem;
    box-sizing: border-box;
    background: #fff;
    transition: 0.15s ease-out;
  }
}

@media (max-width: 900px) {
  .el-step__title {
    font-size: 10px;
  }
  .el-step.is-center .el-step__line {
    left: 75%;
    right: -75%;
  }

  .el-step.is-horizontal .el-step__line {
    height: 0;
    top: 40rem;
    width: 50%;
    border: 1px dashed #e6e6e6;
  }

  .el-step__line-inner {
    border-style: dashed;
  }

  .el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: transparent;
  }

  .el-step__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80rem;
    height: 80rem;
    font-size: 36rem;
    box-sizing: border-box;
    background: #fff;
    transition: 0.15s ease-out;
  }
}
</style>
